
// 搜索
let searchDom = document.querySelector('.search-box');
let searchLineDom = document.querySelector('.search-line');

window.addEventListener('scroll', function () {
    let top = document.documentElement.scrollTop || document.body.scrollTop;
    if (top) {
        searchDom.style.top = `5px`;
        searchLineDom.style.display = 'block';
    } else {
        searchDom.style.top = `24px`;
        searchLineDom.style.display = 'none';
    }
});


//黄色五星好评
let stars = document.querySelectorAll('.stars');
// 遍历所有的 stars 元素
stars.forEach(function (star) {
    // 为每个 stars 元素添加 click 事件监听器
    star.addEventListener('click', function (event) {
        // 获取鼠标点击相对于 stars 元素的位置
        let x = event.offsetX;
        // 设置 star1 的宽度为点击位置的值
        this.querySelector('.star1').style.width = x + 'px'; // 使用 this 引用当前被点击的 stars 元素
    });
});

//红色五星好评
let starR = document.querySelectorAll('.star-r-g');
starR.forEach(function (star) {
    star.addEventListener('click', function (event) {
        let x = event.offsetX;
        this.querySelector('.star-red').style.width = x + 'px';
    });
});

//进度条
let lines = document.querySelectorAll('.percent-all');
lines.forEach(function (line) {
    line.addEventListener('click', function (event) {
        let x = event.offsetX;
        this.querySelector('.percent-line1').style.width = x + 'px';
    });
});

//添加 减少
let numDom = document.querySelector('.number-1');
let add = document.querySelector('.btn-plus');
let sub = document.querySelector('.btn-sub');

add.addEventListener('click', function () {
    numDom.value = parseInt(numDom.value) + 1;
});

sub.addEventListener('click', function () {
    if (numDom.value > 1) {
        numDom.value = parseInt(numDom.value) - 1;
    } else {
        numDom.value = 1;
    }
});

//图片选择、轮播、上一张、下一张
let chooseImages = document.querySelectorAll('.choose');
let bookDom = document.querySelector('.bookCho');
let smallBookContainers = document.querySelectorAll('.small-img-change');

let preDom = document.querySelector('.pre');
let nextDom = document.querySelector('.next');
let imgArr = [];
let currentImg = 0;


//HTMLElement.click() 方法可以用来模拟鼠标左键单击一个元素。
function autoPlay() {
    setInterval(function () {
        nextDom.click();
    }, 5000);
}
autoPlay();

chooseImages.forEach(function (item, index) {
    imgArr.push(item.src);
    item.addEventListener('click', function () {
        bookDom.src = item.src;
        smallBookContainers.forEach(function (container) {
            container.style.border = 'none';
        });
        smallBookContainers[index].style.border = '3px solid #ff6600';
    });
});

nextDom.addEventListener('click', function () {
    currentImg++;
    if (currentImg >= imgArr.length) {
        currentImg = 0;
    }
    bookDom.src = imgArr[currentImg];

    smallBookContainers.forEach(function (container) {
        container.style.border = 'none';
    });
    smallBookContainers[currentImg].style.border = '3px solid #ff6600';
});

preDom.addEventListener('click', function () {
    currentImg--;
    if (currentImg < 0) {
        currentImg = imgArr.length - 1;
    }
    bookDom.src = imgArr[currentImg];

    smallBookContainers.forEach(function (container) {
        container.style.border = 'none';
    });
    smallBookContainers[currentImg].style.border = '3px solid #ff6600';

});

//种类选择
let types = document.querySelectorAll('.type');
let selects = document.querySelectorAll('.select');

types.forEach(function (type) {
    type.addEventListener('click', function () {
        selects.forEach(function (select) {
            select.style.display = 'none';
        });

        // 然后显示当前点击的 .type 元素的关联 .select 图片
        let currentSelect = this.querySelector('.select');
        if (currentSelect) {
            currentSelect.style.display = 'block';
        }
        types.forEach(function (type) {
            type.style.border = '1px solid #c9c9c9';
        });
        this.style.border = '2px solid #ff6600';
    });
});

//选项卡
let intoDom = document.querySelector('.goods-intro');
let recoDom = document.querySelector('.goods-recom');
let show1 = document.querySelector('.goods-introduce');
let show2 = document.querySelector('.btn-change-content')

intoDom.addEventListener('click', function () {
    intoDom.style.background = `#ff6600`;
    intoDom.style.color = `#fefefe`;
    recoDom.style.background = `none`;
    recoDom.style.color = `#4c4c4c`;
    show1.style.display = `block`;
    show2.style.display = `none`;
});

recoDom.addEventListener('click', function () {
    recoDom.style.background = `#ff6600`;
    recoDom.style.color = `#fefefe`;
    intoDom.style.background = `none`;
    intoDom.style.color = `#4c4c4c`;
    show2.style.display = `block`;
    show1.style.display = `none`;
});

//背景变深
let itemBookDom = document.querySelectorAll('.item-book');
itemBookDom.forEach(function (item, index) {
    item.className = 'item-book';
    for (let i = 0; i < itemBookDom.length; i++) {
        itemBookDom[i].addEventListener('mouseover', function (item, index) {
            itemBookDom[i].className = 'item-book background';
        })
        itemBookDom[i].addEventListener('mouseleave', function (item, index) {
            itemBookDom[i].className = 'item-book';
        })
    }
});

// 页面跳转
let navLogin = document.querySelector('.nav-login');
let navRegist = document.querySelector('.nav-regist');
let shopDom = document.querySelector('.shop');

navLogin.addEventListener('click',function(){
  window.location.href = '/login.html';
});
navRegist.addEventListener('click',function(){
  window.location.href = '/register.html';
});
shopDom.addEventListener('click',function(){
    window.location.href = '/car.html'
})



